<template>
    <div id="index-background" class="index-background container-fluid d-flex align-items-center">
        <div style="color: #697842;position: absolute;
    top: 80px;
    right: 6%;
    font-size: 36px;
    font-weight: bold;">静海区国办幼儿园招生报名系统</div>
        <div class="login_container col-3" style="min-width: 50px!important;margin-left: 65.3333%!important;">
            <el-form :model="loginModel" ref="loginModel" :rules="ruleValidate" label-position="left" label-width="30px">
                <el-form-item label=" " prop="username">
                    <el-col :span="24">
                        <el-input v-model="loginModel.username" placeholder="请输入用户名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label=" " prop="password">
                    <el-col :span="24">
                        <el-input type="password" v-model="loginModel.password" placeholder="请输入密码" @keyup.enter.native="login"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="">
                    <el-col :span="24">
                        <el-button type="primary" @click="login" style="width: 100%;border-radius: 4px;">登录</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  import Util from 'assets/js/libs/util'
  import authApi from 'assets/js/api/auth/auth'
  export default{
    data: function () {
      return {
        loginModel:{
          username: '',
          password: ''
      },
        ruleValidate: {
          username: [
            {required: true, message: '账户不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
        }
      }
    },
    mounted: function () {
      this.watchWindowHeight()
    },
    created: function () {
//      this.watchWindowHeight()
      console.log('login')
    },
    methods: {
      login () {
        let self = this
        self.$refs['loginModel'].validate((valid) => {
          if (valid) {
            self.isLoading = true
            self.loginCheck();
          } else {
          }
        })
      },
      loginCheck () {
        let self = this;
        let afterLoginSuccess = function (response) {
          console.log(response)
          Util.setAuthAccessToken(response.data.data.api_token)
          authApi.fetchUser(user => {
            let authRedirectUrl = Util.getAuthRedirect()
            self.isLoading = false
          Util.login(user)
           switch (user.type){
             case '录入':
               self.$router.push({
                 name: 'only-enroll-situation'
               })
               break
             case '编辑':
               self.$router.push({
                 path: '/home/all-list/' + user.school_id
               })
               break
             default:
               self.$router.push({
                    name: 'all'
                  })
                break;
           }
//          self.$router.push({
//            path: authRedirectUrl
//          })
        }).catch(err=>{
          self.$message.error(err.response)
          })
        }
        let afterLoginFailed = function (error) {
          self.$message.error(error.response.data.message)
          self.isLoading = false
        }
        // console.log(res);
        authApi.login({
          username: self.loginModel.username,
          password: self.loginModel.password
        }, afterLoginSuccess, afterLoginFailed)
      },
      watchWindowHeight(){
        let height = document.documentElement.clientHeight;
        $("#index-background").css('height',height);
        window.onresize = function temp() {
          height = document.documentElement.clientHeight;
          $("#index-background").css('height',height);
        };
      }
    },
    computed: {
    },
    watch: {
    }
  }
</script>

<style lang="scss" scoped>
    .index-background{
        background: url('./../../../images/login_background.jpg') no-repeat center center;
        background-size: 100% 100%;
    }
</style>
<style lang="scss">
    .index-background {
        .el-form-item__label:before {
            color: transparent!important;
        }

    }
</style>
